import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./index.scss";
import NoData from "../../../../component/noData/noData";
import { Toast } from "antd-mobile";
import yhTools from "../../../../tools/yh";
import xhfConfig from "../../../../config/XHFConfig";
import { refresh } from "@component/scroll/index2";
import ticketouttime from "../../../../images/icon-ticket-out-time.png";
import titicketused from "../../../../images/icon-ticket-used.png";
class HistoryCardList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			lnid: "", //产品编号
			pageSize: 1000,
			isloaded: false,
			cardDataList: []
		};
	}

	//初始化数据
	componentDidMount() {
		/* let cardList = [
					{
						couponAmount: "￥25",
						couponUseCondition: "满99可用",
						activityType: "信用付消费",
						couponTerm: "2018-11-15~2019-12-30",
						couponUseDesc:
							"券面使用描述券面使用描述券面使用描述券面使用描述",
						statusDes: "领取", //券面状态描述
					    
						status: 1 //0-不可领取，1-可领取
					},
					{
						couponAmount: "￥25",
						couponUseCondition: "满99可用",
						activityType: "信用付消费",
						couponTerm: "2018-11-15~2019-12-30",
						couponUseDesc:
							"券面使用描述券面使用描述券面使用描述券面使用描述",
						statusDes: "已领取", //券面状态描述
						userScene:'到店专享',
						status: 0 //0-不可领取，1-可领取
					},
					{
						couponAmount: "￥25",
						couponUseCondition: "满99可用",
						activityType: "信用付消费",
						couponTerm: "2018-11-15~2019-12-30",
						couponUseDesc:
							"券面使用描述券面使用描述券面使用描述券面使用描述",
						statusDes: "领取", //券面状态描述
						userScene:'到店专享',
						status: 1 //0-不可领取，1-可领取
					},
					{
						couponAmount: "￥25",
						couponUseCondition: "满99可用",
						activityType: "信用付消费",
						couponTerm: "2018-11-15~2019-12-30",
						couponUseDesc:
							"券面使用描述券面使用描述券面使用描述券面使用描述",
						statusDes: "已抢光", //券面状态描述
						userScene:'到店专享',
						status: 0 //0-不可领取，1-可领取
					},
					{
						couponAmount: "￥25",
						couponUseCondition: "满99可用",
						activityType: "信用付消费",
						couponTerm: "2018-11-15~2019-12-30",
						couponUseDesc:
							"券面使用描述券面使用描述券面使用描述券面使用描述",
						statusDes: "已抢光", //券面状态描述
						userScene:'到店专享',
						status: 0 //0-不可领取，1-可领取
					}
				];
				this.setState({
					cardDataList: cardList
				}); */
		this.commitGetCoupon();
	}

	//显示卡券说明
	showExplain(dataRow, rowID) {
		let array = this.state.cardDataList;
		array[rowID].isShow = !array[rowID].isShow;
		let _that = this;
		_that.setState(
			{
				cardDataList: array
			},
			refresh
		);
	}

	//获取卡券数据
	commitGetCoupon() {
		const params = {
			url: xhfConfig.couponHistory,
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const data = res.data;
			if (data) {
				this.setState(
					{
						cardDataList: data.couponHistoryList,
						isloaded: true
					},
					refresh
				);
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	//Item视图
	renderList() {
		let noDataObj = {
			type: "cover",
			msg: "暂无数据"
		};

		let row = (dataRow, rowID) => {
			return (
				<div className="list_item" key={rowID * rowID}>
					<img
						src={dataRow.couponStatus == "2" ? ticketouttime : titicketused}
						alt=""
						className="right-image"
					/>
					<div
						className={
							dataRow.userScene
								? "left-top-tips-grey"
								: "left-top-tips-grey-disable"
						}
					>
						{dataRow.userScene}
					</div>
					<div className="card_value">
						{/* <p className="card_span">{dataRow.couponAmount}</p>
                        <p className="card_span_limit">
                            {dataRow.couponUseCondition}
                        </p> */}
						<img src={dataRow.couponUrl} className="left-image" />
					</div>
					<div className="card_detail">
						<div className="card_title">
							<p className="couponName">{dataRow.couponName}</p>
							<p>
								<span>&yen;</span>
								<span className="couponAmount">{dataRow.couponAmount}</span>
								<span>{dataRow.couponUseCondition}</span>
							</p>
						</div>
						{/* <div className="card_data">{dataRow.couponTerm}</div> */}
						{/* <div className="card_status">{dataRow.statusDes}</div> */}
					</div>
					<div
						className="card-explain"
						onClick={this.showExplain.bind(this, dataRow, rowID)}
					>
						<div className="card-title">
							<span className="card-explain-tip">详细信息</span>
							<i className="icon-open" />
						</div>
						<div
							className={
								dataRow.isShow == true
									? "explain-detail"
									: "explain-detail-un-show"
							}
						>
							{dataRow.couponUseDesc}
						</div>
					</div>
				</div>
			);
		};
		return (
			<div>
				{this.state.cardDataList.map((dataRow, index) => {
					return row(dataRow, index);
				})}
				{this.state.cardDataList.length == 0 && this.state.isloaded && (
					<NoData params={noDataObj} />
				)}
			</div>
		);
	}

	render() {
		const _pageParams = {
			header: {
				title: "使用记录"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams} isScroll={true}>
				<div className="coupon-history-container">
					<div className="content">{this.renderList()}</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const HistoryCardListPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(HistoryCardList);
export default HistoryCardListPage;
